<template>
    <view class="pairing-page">

        <!-- 商品列表 -->
        <view class="item-list">
            <!-- 分组标题 -->
            <view class="group-title">
                <input placeholder="请输入分组标题" v-model="groupName" />
                <button @click="selectAllItems">全部可选</button>
            </view>
            <view class="item" v-for="(item, index) in items" :key="index">
                <view class="item-name">
                    <input placeholder="请输入商品名称" v-model="item.name" />
                    <text>{{ item.discount }}%</text>
                </view>
                <view class="item-quantity">
                    <input type="number" placeholder="份" v-model.number="item.quantity" />
                    <text>元/份</text>
                    <input type="number" placeholder="价格" v-model.number="item.price" />
                </view>
                <button @click="removeItem(index)">删除</button>
            </view>
            <button @click="addItem">添加商品</button>
        </view>

        <!-- 添加分组按钮 -->
        <button @click="addGroup">添加分组</button>

        <!-- 确认按钮 -->
        <button class="confirm-button" @click="confirmPairing">确认</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            groupName: '',
            items: [
                { name: '', quantity: 0, price: 0, discount: 0 },
                { name: '', quantity: 0, price: 0, discount: 0 }
            ]
        };
    },
    methods: {
        addItem() {
            this.items.push({ name: '', quantity: 0, price: 0, discount: 0 });
        },
        removeItem(index) {
            this.items.splice(index, 1);
        },
        addGroup() {
            // Add group logic here
        },
        selectAllItems() {
            // Select all items logic here
        },
        confirmPairing() {
            // Confirm pairing logic here
        }
    }
};
</script>

<style scoped>
.pairing-page {
    padding: 20px;
}

.group-title {
    margin-bottom: 20px;
}

.item-list {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    min-height: 100px;
}

.item {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

.item-name {
    display: flex;
    justify-content: space-between;
}

.item-quantity {
    display: flex;
    justify-content: space-between;
}

.confirm-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
}
</style>